Spread.Viewsでは、グリッド内で、複数のフィールドを単一の列に連結できます。これには、列定義で、同一列に連結する各フィールドをコンマで区切って指定します。各列は、定義した順序で表示されます。

次のサンプルコードは、「photo」、「firstName」、および「lastName」データフィールドを「Employee」列に連結する手順を示します。

サンプルコード

1. 「photo」、「firstName」、および「lastName」フィールドを「Employee」列に連結します。
   

   var data = [];
           for (var i = 0, len = 100; i < len; i++) {
               data.push({
                   firstName: 'Daryl',
                   lastName: 'Sweeney',
                   photo: './images/ds.jpg',
                   position: 'CEO',
                   phone: '(555)924-9726'
               });
               data.push({
                   firstName: 'Guy',
                   lastName: 'Wooten',
                   photo: './images/gw.jpg',
                   position: 'CTO',
                   phone: '(438)738-4935'
               });
               data.push({
                   firstName: 'Buffy',
                   lastName: 'Weber',
                   photo: './images/bw.jpg',
                   position: 'VP. Engineering',
                   phone: '(699)924-9726'
               });
               data.push({
                   firstName: 'Hyacinth',
                   lastName: 'Hood',
                   photo: './images/hh.jpg',
                   position: 'Team Lead',
                   phone: '(889)924-9726'
               });
               data.push({
                   firstName: 'Akeem',
                   lastName: 'Carr',
                   photo: './images/ac.jpg',
                   position: 'Software Developer',
                   phone: '(738)924-9726'
               });
   
           }
   
           var photoPresenter = '<img class="employee-photo" style="vertical-align: middle;" src={{=it.photo}} ></len>';
           var positionPresenter = '<span class="txt-span">{{=it.position}}</span>';
           var phonePresenter = '<span class="txt-span">{{=it.phone}}</span>';
           var columns = [{
               id: 'employee',
               caption: 'Employee',
               dataField: 'photo,firstName,lastName',
               colHeaderPresenter: '<p class="vertical-middle">{{=it.employee}}</p>'
           }, {
               id: 'photo',
               dataField: 'photo',
               presenter: photoPresenter,
               visible: false
           }, {
               id: 'firstName',
               dataField: 'firstName',
               visible: false
           }, {
               id: 'lastName',
               dataField: 'lastName',
               visible: false
           }, {
               id: 'position',
               caption: 'Position',
               dataField: 'position',
               presenter: positionPresenter,
               colHeaderPresenter: '<p class="vertical-middle">{{=it.position}}</p>'
           }, {
               id: 'phone',
               caption: 'Phone',
               dataField: 'phone',
               presenter: phonePresenter,
               colHeaderPresenter: '<p class="vertical-middle">{{=it.phone}}</p>'
          }];

2. DIVタグのグリッドIDを呼び出し、コードを初期化します。
   

    var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({
                rowHeight: 40,
                colHeaderHeight: 40
          }));

参照

rowHeight

colHeaderHeight